<template>
    <div class="container">
        <scroll-view :scroll-y="true" style="height: 100vh;">
            <div style="background: #fff; padding-bottom: 100rpx;">
                <div class="headers">
                    <div class="topHeader">
                        <div class="topLeft">
                            <div v-if="isLogin" class="left_Name">
                                {{ userData.name }}
                            </div>
                            <div v-else class="left_Name" @click="gourlLogin">
                                请注册/登录
                            </div>
                        </div>
                        <div class="topRight" @click="handleIntoEditUserMsg"></div>
                    </div>
                    <div class="left_Image">
                        <img class="avatar" src="/static/images/defaultAvatar.png" alt="" />
                        <span>老师</span>
                    </div>
                </div>
                <div class="myServiceArea">
                    <div class="serviceList">
                        <div class="serviceItem" @click="handleIntoWebView('sxCourse')">                            
                            <img class="itemImage icon_mall" src="../../../static/images/icon_mall.png" /> 
                            <div class="itemName">
                                升学课程
                            </div>
                        </div>
                        <div class="serviceItem" @click="handleIntoWebView('yxk')">
                            <div class="itemImage bg_service_school"></div>
                            <div class="itemName">
                                院校库
                            </div>
                        </div>
                        <div class="serviceItem" @click="handleIntoWebView('profession')">
                            <div class="itemImage bg_service_college"></div>
                            <div class="itemName">
                                专业库
                            </div>
                        </div>
                    </div>
                    <div class="serviceList line2">
                        <div class="serviceItem"  @click="handleIntoMyStudentService">
                            <div class="itemImage bg_service_student"></div>
                            <div class="itemName">
                                我的学生
                            </div>
                        </div>
                        <div class="serviceItem"  @click="goCourseware">
                            <img class="itemImage bg_kejian" src="../../../static/images/kejian.png" /> 
                            <div class="itemName">
                                课件资源
                            </div>
                        </div>
                        <!-- <div class="serviceItem"  @click="handleIntoMyStudentService">
                            <div class="itemImage bg_service_student"></div>
                            <div class="itemName">
                                我的学生
                            </div>
                        </div> -->
                        <div class="serviceItem" @click="handleIntoProblemFeedback">
                            <div class="itemImage bg_service_vip"></div>
                            <div class="itemName">
                                专属客服
                            </div>
                        </div>
                        <!-- <div class="serviceItem" @click="handleGoUrl('service')">
                            <img class="itemImage" src="../../../static/images/icon_mall.png" style="display: block;" />
                            <div class="itemName">
                                升学服务
                            </div>
                        </div> -->
                    </div>
                </div>
                <college-enrollment></college-enrollment>
                <div class="peixunBox">
                    <div class="topicTitle" @click="goTest" style="padding: 0;">
                        <div class="leftTip">
                            线上培训
                        </div>
                        <!-- <div class="rightMore"></div> -->
                    </div>
                    <img @click="goTest" src="https://static.shengxue985.com/sxzx_wechat/images/exam-banner.png" class="zhiboImg" alt=""/>
                    <!-- <div class="desc">提升班主任管理服务，拓展班主任知识结构.</div> -->
                </div>
                <div class="peixunBox teaBox">
                    <div class="tiltes guanzhuTitle">
                        教师关注
                    </div>
                    <div class="guanzhu flex-h" v-for="(item, index) of hotNewsList" :key="index" @click="handleIntoHotNews(item.id)">
                        <img src="../../../static/images/redian.png" alt="" /><span class="flex1">{{ item.title }}</span>
                    </div>
                </div>
                <div class="peixunBox teaBox">
                    <div class="tiltes guanzhuTitle">
                        升学服务推荐
                    </div>
                    <div class="guanzhu flex-h" v-for="(item, index) of queryRecommendList" :key="index" @click="handleIntoWebView('infoDetail', item.id)">
                        <img src="../../../static/images/notice.png"  alt="" /><span class="flex1">{{ item.title }}</span>
                    </div>
                </div>
                <div class="peixunBox teaBox">
                    <div class="tiltes guanzhuTitle">
                        高校招生
                    </div>
                    <div class="tabNave">
                        <div class="tabBox flex-h">
                            <span :class="['flex1', tabIndex === 1 ? 'active' : '']" @click="tabs(1)">快讯</span>
                            <span :class="['flex1', tabIndex === 2 ? 'active' : '']" @click="tabs(2)">直播</span>
                            <span :class="['flex1', tabIndex === 3 ? 'active' : '']" @click="tabs(3)">咨询</span>
                            <span :class="['flex1', tabIndex === 4 ? 'active' : '']" @click="tabs(4)">专题</span>
                        </div>
                    </div>
                    <div v-show="tabIndex === 1">
                        <div class="kuaixunBox">
                            <div class="flex-h kuaixun" v-for="(i, index) in infoList" :key="index" @click="handleIntoWebView('infoDetail', i.id)">
                                <i></i>
                                <b>{{ i.title }}</b>
                            </div>   
                            <div class="more" @click="handleIntoWebView('infoMore', provincesId)"><b>查看更多</b>
                            <img src="../../../static/images/com_icon_arrow_right_gray_32.png" alt="" />
                            </div>
                        </div>
                    </div>
                    <div v-show="tabIndex === 2">
                          <div class="liveRoomBox">
                            <div class="listBox" v-for="item in liveList" :key="item.id">
                            <div class="imgBox flex-h" @click="watchVideo(item)">
                                <img :data-src="item.live_imgae_url" class="left" :src="item.thumbnail" alt="" />
                                <div class="right flex1">
                                <span class="title">{{ item.title }}</span>
                                <span :class="['status', item.status ===3 ? 'status3' : item.status ===2 ? 'status2' : 'status1']">
                                    {{item.status ===3 ? '直播结束' : item.status ===2 ? '等待直播' : '直播中' }}
                                </span>
                                <span class="time">开始时间：{{ item.start_time }}</span>
                                </div>
                            </div>
                            <div class="desc">
                                <b>直播导师：{{ item.teacher }}</b
                                ><i>{{ item.teacher_introduction }}</i>
                            </div>
                            </div>
                        </div>
                        <div class="more" @click="handleIntoWebView('videoMore', provincesId)"><b>查看更多</b>
                        <img src="../../../static/images/com_icon_arrow_right_gray_32.png" alt="" />
                        </div>
                    </div>
                    <div v-show="tabIndex === 3">
                          <div class="zixunBox">
                            <div class="zixun flex-h" v-for="item in advisoriesList" :key="item.academy_code" @click="handleIntoWebView('academyIssue',item.academy_code)">
                            <div class="left">
                                <img :src="item.icon" alt="" />
                            </div>
                            <div class="center flex1">
                                <h2>{{ item.academy_name }}</h2>
                                <p>{{ item.feature }}</p>
                            </div>
                            <div class="right">
                                <span>咨询</span>
                            </div>
                            </div>
                        </div>
                        <div class="more" @click="handleIntoWebView('academyIssueMore', provincesId)"><b>查看更多</b>
                        <img src="../../../static/images/com_icon_arrow_right_gray_32.png" alt="" />
                        </div>
                    </div>
                    <div v-show="tabIndex === 4">
                    <div style="box-sizing: boder-box;">
                        <div class="subtitle flex-h" style="padding: 0;" @click="handleIntoWebView('topicMore')">
                        <span class="flex1" style="font-size: 40rpx;">精选专题</span>
                        <div class="flex1" style="text-align: right;">
                            <img class="imgIcon" src="../../../static/images/toRight.png" alt="" />
                        </div>
                        </div>
                         <div class="curriculum-list flex-h">
                            <div class="curriculum" v-for="item in recommendsList" :key="item.id" @click="handleIntoWebView('topicDetail', item.id)">
                                <div class="img-box">
                                <img class="pics" :src="item.cover" alt />
                                <img class="state" v-if="item.sign" :src="item.sign === '新' ? imgXin : item.sina === '热' ? imgRe : imgJian" alt />
                                </div>
                                <span class="title" v-if="item.topic_name">{{ item.topic_name }}</span>
                            </div>
                        </div>
                        <div class="subtitle flex-h" style="padding: 0;" @click="handleIntoWebView('topicMore','text')">
                        <span class="flex1" style="font-size: 40rpx;">图文专题</span>
                        <div class="flex1" style="text-align: right;">
                            <img class="imgIcon" src="../../../static/images/toRight.png" alt="" />
                        </div>
                        </div>
                           <div class="curriculum-list flex-h">
                            <div class="curriculum" v-for="item in graphsLists" :key="item.id" @click="handleIntoWebView('topicDetail', item.id)">
                                <div class="img-box">
                                <img class="pics" :src="item.cover" alt />
                                <img class="state" v-if="item.sign" :src="item.sign === '新' ? imgXin : item.sina === '热' ? imgRe : imgJian" alt />
                                </div>
                                <span class="title" v-if="item.topic_name">{{ item.topic_name }}</span>
                            </div>
                        </div>
                        <div class="subtitle flex-h" style="padding: 0;" @click="handleIntoWebView('topicMore','video')">
                        <span class="flex1" style="font-size: 40rpx;">视频专题</span>
                        <div class="flex1" style="text-align: right;">
                            <img class="imgIcon" src="../../../static/images/toRight.png" alt="" />
                        </div>
                        </div>
                           <div class="curriculum-list flex-h">
                            <div class="curriculum" v-for="item in videoLists" :key="item.id" @click="handleIntoWebView('topicDetail', item.id)">
                                <div class="img-box">
                                <img class="pics" :src="item.cover" alt />
                                <img class="state" v-if="item.sign" :src="item.sign === '新' ? imgXin : item.sina === '热' ? imgRe : imgJian" alt />
                                </div>
                                <span class="title" v-if="item.topic_name">{{ item.topic_name }}</span>
                            </div>
                        </div>
                    </div>
                    </div>

                </div>
                <div class="footer" @click="handleGoUrl('aboutUs')">
                    <img src="https://static.shengxue985.com/sxzx_wechat/teacher/teacher_home_bg.png" alt="">
                </div>
                <!-- <div class="opreateArea">
                    <div class="singleItem" @click="handleGoUrl('aboutUs')">
                        <div class="left">
                            <div class="itemIcon bg_icon_aboutUs"></div>
                            <div class="itemName">
                                平台介绍
                            </div>
                        </div>
                        <div class="right"></div>
                    </div>
                    <div class="singleItem" @click="handleGoUrl('set')">
                        <div class="left">
                            <div class="itemIcon bg_icon_set"></div>
                            <div class="itemName">
                                设置
                            </div>
                        </div>
                        <div class="right"></div>
                    </div>
                </div> -->
            </div>
        </scroll-view>

        <div class="x-vip-buy" v-show="xBuy" catchtouchmove="true">
            <div class="vipBuys">
                <div class="imgbox">
                    <img src="../../../static/images/testbg.png" alt="" />
                </div>
                <div class="topVipArea" @click="gomall">
                    <div class="listbox">
                        <div class="list">
                            <b>姓名</b><input v-model="testName" type="text" />
                        </div>
                        <div class="list">
                            <b>身份证</b
                            ><input v-model="testCard" type="text" />
                        </div>
                        <div class="list">
                            <b>手机号</b><input v-model="testTel" type="text" />
                        </div>
                        <div class="btnImage" @click="startTest">
                                确定
                        </div>
                    </div>
                </div>
                <div class="closeBtn" @click="handleCancel">
                    <img src="../../../static/images/xx.png" alt="" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import config from "../../../package.json";
import ls from 'store2';
import { getInfos, getProvinces, getLives, getAdvisories, getTopics  } from "../../api/shengxueApi";
import { queryRecommendSxService } from "../../api/teacherApi";
import format from "../../utils/filter";
export default {
    data() {
        return {
            provincesId:0,
            testName: "",
            testCard: "",
            testTel: "",
            xBuy: false,
            isLogin: false,
            // commodityList: [1, 2],
            userData: {},
            userArea: "全国",
            hotNewsList: [],
            tabIndex: 1,
            infoList:[],
            liveList:[],
            advisoriesList:[],
            recommendsList:[],
            videoLists:[],
            graphsLists:[],
            queryRecommendList:[]
        };
    },
    onLoad(e) {
        Object.assign(this.$data, this.$options.data());
    },
    mounted() {
        wx.showShareMenu();
        const loginOrNot = wx.getStorageSync("tokens");
        if (loginOrNot) {
            this.isLogin = true;
            this.userData = JSON.parse(wx.getStorageSync("teacherData"));
            this.getUserArea();
        } else {
            this.isLogin = false;
            // this.getWeekTopicList();
        }
        this.getHotNewsList();
        this.getResult()
        this.queryRecommendSxService()
    
    },

    methods: {
        queryRecommendSxService(){
            let obj={
                "beginReadTime": new Date().format("yyyy-MM-dd hh:mm:ss"),
                "recommendSize": 5,
                "publishPlatform":'2'
            }
            queryRecommendSxService(obj).then(res=>{
                if(res.code == '0') {
                    this.queryRecommendList = res.data 
                }

            })
        },
        goCourseware(){
            this.$mpvue.jump("../courseware/home/main");
        },
        watchVideo(item){
            if(item.status === 1){
                this.$mpvue.showToast("培训尚未开始~");
            }else {
                if(item.live_video_url){
                    this.handleIntoWebView('video',encodeURIComponent(item.live_video_url))    
                }else {
                   this.$mpvue.showToast("视频尚在整理中，请稍后再试~"); 
                }
            }
            console.log('item: ', item)

        },
        async getResult() {
            let provincesList = await this.getProvinces()
            if (this.$root.userArea != '全国' ) {
                provincesList.forEach((item) => {
                    if (item.label === this.$root.userArea) {
                        this.provincesId = item.id
                    }
                })
            } else {
                this.provincesId = 0
            }
            let infos = await this.getInfos(this.provincesId)
            this.infoList = infos.data
            let lives = await this.getLives(1, 5)
            // this.liveList = lives.data
            this.liveList  = lives.data
            this.liveList.forEach(item=>{
                if(new Date().getTime() > new Date(item.end_time.replace(/-/g, '/')).getTime()){
                    item.status = 3
                }else if(new Date(item.start_time.replace(/-/g, '/')).getTime() > new Date().getTime()){
                    item.status = 2
                }else {
                    item.status = 1
                }
            })
            let advisories = await this.getAdvisories(1, 5, this.provincesId, '')
            this.advisoriesList = advisories.data
            let topics = await this.getTopics()
            this.recommendsList = topics.recommends
            this.videoLists = topics.videos
            this.graphsLists = topics.graphs
            console.log('topics: ', topics)

            console.log('liveData: ', this.liveList);
        },
        getProvinces() {
            return getProvinces()
        },
        getInfos(id){
            return getInfos(1, 5, id)
        },
        getLives(page, limit) {
            return getLives(page, limit)
        },
        getAdvisories(page, limit, povId, search) {
            return getAdvisories(page, limit, povId, search)
        },
        getTopics() {
            return getTopics()
        },

        tabs(i) {
            this.tabIndex = i
    //   this.$emit('getToIndex', i)
        },
        startTest() {
            if (!this.testName) {
                this.$mpvue.showToast("请输入您的姓名~");
                return;
            }
            if (this.testCard.length < 15) {
                this.$mpvue.showToast("请输入正确的身份证号码~");
                return;
            }
            if (this.testTel.length != 11) {
                this.$mpvue.showToast("请输入正确的手机号码~");
                return;
            }
            let obj = {
                testName: this.testName,
                testCard: this.testCard,
                testTel: this.testTel,
            };
            this.$mpvue.jump("../teacherTest/main?tesrtInfo=" + JSON.stringify(obj));
            this.xBuy = false;
        },
        getCheckTime() {
            //  this.xBuy = true
            //  wx.navigateTo({ url: '../teacherTest/main?tesrtInfo='})
            //  return;
            let that = this;
            const data = JSON.parse(wx.getStorageSync("teacherData"));
            let $uid = data.userVoId;
            wx.request({url: "https://flight-code.sx985.com/teacher/exam/" + $uid +"/check",
                header: {
                    "content-type": "application/json", // 默认值
                },
                success(res) {
                    console.log("res: ", res);
                    if (res.data.code == "404") {
                        wx.showToast({
                            title: res.data.msg,
                            icon: "none",
                            duration: 1000,
                        });
                        return;
                    }
                    if (res.data.code == "200" && res.data.data == "") {
                        wx.showToast({
                            title: res.data.msg,
                            icon: "none",
                            duration: 2000,
                        });
                        return;
                    }
                    if (res.data.code == "200" && res.data.msg == "成功") {
                        that.xBuy = true;
                    }
                    console.log(res.data);
                },
            });
        },
        goTest() {
            this.$mpvue.showToast("考试已结束~"); 
            return
            // if (this.isLogin) {
            //      this.$mpvue.showToast("视频尚在整理中，请稍后再试~"); 
            //     // wx.navigateTo({ url: '../teacherTest/main' })

            //     this.getCheckTime();
            // } else {
            //     this.gourlLogin();
            // }
        },
        handleCancel() {
            this.xBuy = false;
        },
        previewImage: function (e) {
            if (!this.isLogin) {
                this.gourlLogin();
                return false;
            }
            var current = e.target.dataset.src;
            wx.previewImage({
                current: current,
                urls: [current],
            });
        },
        getHotNewsList() {
            this.$httpWX
                .post({
                    url: "/academy/teacher/myHotspot",
                    header: {
                        "content-type": "application/json", // 默认值
                    },
                })
                .then((res) => {
                    this.hotNewsList = res.data.filter((item, index) => {
                        return index < 6;
                    });
                });
        },
        // 跳到外链
        handleIntoWebView(type, data) {
            console.log(this.$mpvue,'mpvue对象');
            if (this.isLogin) {
                let pagram = data ? pagram = "&data=" + data : pagram = ''
                this.$mpvue.jump("../outerWebView/main?type=" +type + pagram);   
            } else {
                this.gourlLogin();
            }
        },
        handleIntoHotNews(id) {
            if (this.isLogin) {
                this.$mpvue.jump("../hotNews/main?id=" + id);
            } else {
                this.gourlLogin();
            }
        },
        // 敬请期待
        showToast() {
            this.$mpvue.showToast("敬请期待~");
        },
        // 跳登录
        gourlLogin() {
            this.$mpvue.jump("../login/main", 2);
        },
        getUserArea() {
            const data = JSON.parse(wx.getStorageSync("teacherData"));
            this.$httpWX
                .post({
                    url: "/shengxueApi/thirdParty/user/getTeacherUserInfoById",
                    data: {
                        uid: data.userVoId,
                    },
                    header: {
                        "content-type": "application/json", // 默认值
                        "Api-Version": "2.0.1",
                        accessToken: wx.getStorageSync("tokens"),
                    },
                })
                .then((res) => {
                    const area = res.data.area;
                    this.userArea = area.split(",")[0];
                    wx.setStorage({
                        key: "userArea",
                        data: encodeURI(this.userArea),
                    });
                    // this.getWeekTopicList();
                });
        },
        // 获取每周专题
        // getWeekTopicList() {
        //     let obj = {
        //         application: "wechat",
        //         areaName: {
        //             areaName: this.userArea,
        //         },
        //         modulePage: "index",
        //         version: config.version,
        //     };
        //     indexShow(obj).then((res) => {
        //         this.commodityList =
        //             res.data.recommendCommoditiesList.recommendCommodities;
        //     });
        // },
        handleGoUrl(url) {
            if (this.isLogin) {
                this.$mpvue.jump("../" + url + "/main");
            } else {
                this.gourlLogin();
            }
        },
        // 编辑
        handleIntoEditUserMsg() {
            if (this.isLogin) {
                this.$mpvue.jump("../editUserMsg/main");
            } else {
                this.gourlLogin();
            }
        },
        // 我的学生
        handleIntoMyStudentService() {
            if (this.isLogin) {
                this.$mpvue.jump("../myStudentIndex/main");
            } else {
                this.gourlLogin();
            }
        },
        // 问题反馈
        handleIntoProblemFeedback() {
            if (this.isLogin) {
                this.$mpvue.jump("../problemFeedback/main");
            } else {
                this.gourlLogin();
            }
        },
    },
};
</script>

<style lang="less" scoped>
.headers {
    width: 750rpx;
    height: 393rpx;
    background: url("https://static.shengxue985.com/sxzx_miniprogram/teacher/me_bg_pic.png")
        no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 128rpx 69rpx 0 65rpx;
    margin-bottom: 110rpx;
    position: relative;
    .topHeader {
        width: 100%;
        height: 139rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .topLeft {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .left_Name {
                color: #000;
                font-size: 44rpx;
                font-weight: bold;
            }
        }
        .topRight {
            width: 36rpx;
            height: 36rpx;
            background: url("https://static.shengxue985.com/sxzx_miniprogram/teacher/css_sprites.png") -1220rpx -2015rpx;
            background-size: 746rpx 350rpx;
        }
    }
    .left_Image {
        position: absolute;
        bottom: -100rpx;
        left: 305rpx;
        width: 140rpx;
        height: 180rpx;
        .avatar {
            width: 140rpx;
            height: 140rpx;
            border-radius: 50%;
        }
        span {
            display: inline-block;
            width: 100rpx;
            height: 40rpx;
            line-height: 40rpx;
            text-align: center;
            color: #fff;
            font-size: 24rpx;
            background: #ffad0d;
            border-radius: 20rpx;
            position: absolute;
            left: 21rpx;
            bottom: 0;
        }
    }
    .bottomHeader {
        width: 726rpx;
        height: 112rpx;
        background: url("https://static.shengxue985.com/sxzx_miniprogram/teacher/css_sprites.png") -10rpx -10rpx;
        background-size: 746rpx 350rpx;
        position: absolute;
        left: 12rpx;
        bottom: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 40rpx 0 46rpx;
        box-sizing: border-box;
        .left {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-right: 26rpx;
            .icon {
                width: 32rpx;
                height: 31rpx;
                margin-right: 12rpx;
            }
            .title {
                color: #ffd782;
                font-size: 24rpx;
                font-weight: bold;
                line-height: 60rpx;
            }
        }
        .right {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex: 1;
            .describe {
                color: #ffd782;
                font-size: 24rpx;
                font-weight: bold;
                line-height: 60rpx;
                flex: 1;
                height: 30rpx;
                overflow: hidden;
                .itemTitle {
                    width: 400rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    position: relative;
                    top: -15rpx;
                }
            }
            .icon {
                width: 32rpx;
                height: 32rpx;
                background: url("https://static.shengxue985.com/sxzx_miniprogram/teacher/css_sprites.png") -1170rpx -2015rpx;
                background-size: 746rpx 350rpx;
            }
        }
    }
}
.myServiceArea {
    padding: 0 33rpx 0 30rpx;
    margin-bottom: 55rpx;
    .serviceList {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .serviceItem {
            width: 138rpx;
            height: 123rpx;
            text-align: center;
            .itemImage {
                width: 72rpx;
                height: 72rpx;
                margin: 0 auto 20rpx;
                display: block;
                border: none;
            }
            .bg_service_course {
                background: url("https://static.shengxue985.com/sxzx_miniprogram/teacher/css_sprites.png") -190rpx -2010rpx;
                background-size: 746rpx 350rpx;
            }
            .bg_service_school {
                background: url("https://static.shengxue985.com/sxzx_miniprogram/teacher/css_sprites.png") -500rpx -1885rpx;
                background-size: 746rpx 350rpx;
            }
            .bg_service_college {
                background: url("https://static.shengxue985.com/sxzx_miniprogram/teacher/css_sprites.png") -595rpx -1885rpx;
                background-size: 746rpx 350rpx;
            }
            .bg_service_student {
                background: url("https://static.shengxue985.com/sxzx_miniprogram/teacher/css_sprites.png") -10rpx -2010rpx;
                background-size: 746rpx 350rpx;
            }
            .bg_service_vip {
                background: url("https://static.shengxue985.com/sxzx_miniprogram/teacher/css_sprites.png") -105rpx -2010rpx;
                background-size: 746rpx 350rpx;
            }
            .itemName {
                color: #070707;
                font-size: 24rpx;
            }
        }
    }
    .line2 {
        margin-top: 30rpx;
    }
}
.peixunBox {
    padding: 30rpx;
    box-sizing: border-box;
    border-top: 20rpx solid rgba(247, 247, 247, 1);
    .tiltes {
        font-size: 36rpx;
        font-weight: bold;
        color: rgba(0, 0, 0, 1);
    }
    .guanzhuTitle {
        margin-bottom: 30rpx;
    }
    .zhiboImg {
        display: block;
        width: 100%;
        height: 330rpx;
        margin-top: 50rpx;
    }
    .guanzhu {
        height: 80rpx;
        img {
            width: 40rpx;
            height: 40rpx;
            vertical-align: middle;
        }
        span {
            vertical-align: middle;
            padding-left: 20rpx;
            box-sizing: border-box;
            font-size: 28rpx;
            font-weight: 500;
            color: rgba(0, 0, 0, 1);
            width: 600rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            white-space: nowrap;
        }
    }
    .desc {
        font-size: 30rpx;
        font-weight: bold;
        color: rgba(0, 0, 0, 1);
        margin-top: 30rpx;
    }
}
.topicTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 36rpx 0 31rpx;
    margin-bottom: 53rpx;
    .leftTip {
        color: #070707;
        font-size: 36rpx;
        font-weight: bold;
    }
    .rightMore {
        width: 32rpx;
        height: 32rpx;
        background: url("https://static.shengxue985.com/sxzx_miniprogram/teacher/css_sprites.png") -1170rpx -2011rpx;
        background-size: 746rpx 350rpx;
    }
}
// .opreateArea {
//     padding: 0 34rpx;
//     .singleItem {
//         width: 100%;
//         height: 112rpx;
//         border-bottom: 1rpx solid #e5e5e5;
//         display: flex;
//         justify-content: space-between;
//         align-items: center;
//         .left {
//             display: flex;
//             justify-content: flex-start;
//             align-items: center;
//             .itemIcon {
//                 width: 36rpx;
//                 height: 36rpx;
//                 margin-right: 26rpx;
//             }
//             .itemIcon_img {
//                 width: 36rpx;
//                 height: 36rpx;
//                 margin-right: 26rpx;
//                 img {
//                     width: 30rpx;
//                     height: 30rpx;
//                     margin: 0 auto;
//                     position: relative;
//                     top: -5rpx;
//                     left: 5rpx;
//                 }
//             }
//             .bg_icon_aboutUs {
//                 background: url("https://static.shengxue985.com/sxzx_miniprogram/teacher/css_sprites.png") -1433rpx -493rpx;
//                 background-size: 746rpx 350rpx;
//             }
//             .bg_icon_set {
//                 background: url("https://static.shengxue985.com/sxzx_miniprogram/teacher/css_sprites.png") -1110rpx -2018rpx;
//                 background-size: 746rpx 350rpx;
//             }
//             .itemName {
//                 color: #070707;
//                 font-size: 28rpx;
//                 font-weight: bold;
//             }
//         }
//         .right {
//             width: 36rpx;
//             height: 36rpx;
//             background: url("https://static.shengxue985.com/sxzx_miniprogram/teacher/css_sprites.png") -1170rpx -2011rpx;
//             background-size: 746rpx 350rpx;
//         }
//     }
// }
.x-vip-buy {
    position: fixed;
    width: 750rpx;
    height: 100vh;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 4;

    .vipBuys {
        width: 580rpx;
        height: auto;
        border-radius: 10rpx;
        margin: 250rpx auto 0;
        overflow: hidden;
        .imgbox {
            width: 100%;
            height: 240rpx;
            img {
                width: 100%;
                height: 240rpx;
            }
        }
        .topVipArea {
            width: 100%;
            height: 550rpx;
            // background: url('~/static/sxPlan/pic.png') no-repeat 100% 100%;
            // background-size: 100% 100%;
            background: #fff;
            position: relative;
            border-bottom-left-radius: 10rpx;
            border-bottom-right-radius: 10rpx;
            .listbox {
                padding: 40rpx;
                box-sizing: border-box;
                width: 100%;
                .list {
                    display: flex;
                    align-items: center;
                    height: 80rpx;
                    width: 100%;
                    border: 1rpx solid #e7e7e7;
                    padding: 0 30rpx;
                    box-sizing: border-box;
                    margin-bottom: 30rpx;
                    b,
                    input {
                        font-size: 28rpx;
                        font-weight: 500;
                        color: rgba(34, 34, 34, 1);
                    }
                    input {
                        flex: 1;
                        outline: none;
                        border: none;
                        padding-left: 30rpx;
                        box-sizing: border-box;
                    }
                }
            }
            .btnImage {
                width: 100%;
                height: 88rpx;
                background: rgba(255, 173, 13, 1);
                border-radius: 44rpx;
                line-height: 88rpx;
                text-align: center;
                font-size: 36rpx;
                font-weight: 400;
                color: rgba(254, 254, 254, 1);
                margin-top: 50rpx;
            }
        }
        .closeBtn {
            margin: 30rpx auto 0;
            width: 80rpx;
            height: 80rpx;
            img {
                display: block;
                width: 100%;
                height: 100%;
          
            }
        }
    }
}
.flex1{
    flex:1
}
.flex-h,
.flex-v {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-h {
  flex-direction: row;
}

.tabNave {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  span {
    text-align: center;
    height: 50rpx;
    line-height: 50rpx;
    font-size: 34rpx;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    border-right: 1rpx solid rgba(229, 232, 237, 1);
    overflow: inherit;
  }
  span:nth-of-type(4) {
    border-right: none;
  }
  .active {
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
    position: relative;
  }
  .active::after {
    content: '';
    position: absolute;
    width: 40rpx;
    height: 8rpx;
    background: rgba(255, 173, 13, 1);
    border-radius: 4rpx;
    left: 50%;
    margin-left: -20rpx;
    bottom: -20rpx;
  }
}
.kuaixunBox {
  width: 100%;
  height: auto;
  .kuaixun {
    margin-bottom: 50rpx;
    i {
      display: inline-block;
      width: 10rpx;
      height: 10rpx;
      background: rgba(255, 214, 61, 1);
    }
    b {
      font-size: 30rpx;
      font-weight: 500;
      color: rgba(34, 34, 34, 1);
      line-height: 40rpx;
      padding-left: 30rpx;
      box-sizing: border-box;
      width: 640rpx;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
    }
  }
}
.more {
  width: 690rpx;
  height: 80rpx;
  background: rgba(247, 247, 250, 1);
  border-radius: 10rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 0 auto 60rpx;
  b {
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    vertical-align: middle;
    display: inline-block;
  }
  img {
    display: inline-block;
    width: 32rpx;
    height: 32rpx;
    vertical-align: middle;
  }
}
.liveRoomBox {
//   padding: 30rpx;
  box-sizing: border-box;
  .listBox {
    width: 100%;
    height: auto;
    padding: 30rpx 0;
    border-bottom: 1rpx solid rgba(229, 229, 229, 1);
    position: relative;
    z-index: 1;
    .clickImg {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 2;
      opacity: 0;
      -ms-filter: 'progid: DXImageTransform.Microsoft.Alpha(Opacity=0)';
      filter: alpha(opacity=0);
      opacity: 0;
    }
    .imgBox {
      height: 180rpx;
      .left {
        width: 320rpx;
        height: 180rpx;
      }
      .right {
        padding-left: 20rpx;
        box-sizing: border-box;
        .title {
          font-size: 30rpx;
          font-weight: 500;
          color: rgba(0, 0, 0, 1);
          display: block;
          line-height: 40rpx;
          height: 80rpx;
        }
        .status {
          padding: 0 15rpx;
          height: 40rpx;
          line-height: 40rpx;
          border-radius: 20rpx;

          border-radius: 20rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          margin-top: 10rpx;
        }
        .status1 {
          background: rgba(242, 63, 63, 1);
        }
        .status2 {
          background: #ffad0d;
        }
        .status3 {
          background: #d2d2d2;
        }
        .time {
          display: block;
          font-size: 24rpx;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: rgba(177, 177, 177, 1);
          margin-top: 0.15;
        }
      }
    }
    .desc {
      height: auto;
      margin-top: 30rpx;
      i,
      b {
        display: initial;
      }
      b {
        font-size: 26rpx;
        font-weight: 500;
        color: rgba(5, 5, 5, 1);
      }
      i {
        font-size: 26rpx;
        font-weight: 500;
        color: rgba(99, 99, 99, 1);
        margin-left: 20rpx;
        line-height: 30rpx;
      }
    }
  }
}
.zixunBox {
  width: 100%;
//   padding: 0 30rpx;
  box-sizing: border-box;
  height: auto;
  .zixun {
    overflow: hidden;
    padding: 30rpx 0;
    border-bottom: 1rpx solid rgba(230, 232, 237, 1);
    .left {
      img {
        display: block;
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
      }
    }
    .center {
      padding-left: 30rpx;
      box-sizing: border-box;
      h2 {
        font-size: 30rpx;
        font-weight: 500;
        color: rgba(34, 34, 34, 1);
      }
      p {
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        margin-top: 20rpx;
        line-height: 36rpx;
      }
    }
    .right {
      span {
        display: block;
        width: 120rpx;
        height: 60rpx;
        border-radius: 30rpx;
        border: 1rpx solid rgba(255, 160, 0, 1);
        text-align: center;
        line-height: 60rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: rgba(255, 173, 13, 1);
        margin-top:35rpx;
      }
    }
  }
}
.subtitle {
  padding: 0 30rpx;
  box-sizing: border-box;
  height: 80rpx;
  margin: 20rpx auto;
  span {
    font-size: 40rpx;
    font-family: PingFangSC;
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
    line-height: 80rpx;
  }
  .imgIcon {
    width: 60rpx;
    height: 60rpx;
    display: inline-block;
  }
}
.curriculum-list {
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  .curriculum {
    width: 330rpx;
    height: auto;
    margin-bottom: 40rpx;
    .img-box {
      width: 100%;
      height: 250rpx;
      border-radius: 8rpx;
      position: relative;
      .pics {
        width: 100%;
        height: 250rpx;
        display: block;
        background: url('../../../static/images/header.png') no-repeat;
        background-size: 100% 100%;
        border-radius: 10rpx;
      }
      .state {
        position: absolute;
        width: 68rpx;
        height: 68rpx;
        left: 0;
        top: 0;
      }
      .start {
        position: absolute;
        width: 60rpx;
        height: 60rpx;
        right: 16rpx;
        bottom: 16rpx;
      }
      .vips {
        position: absolute;
        width: 70rpx;
        height: 36rpx;
        left: 0;
        bottom: 0;
      }
    }
    .title {
      display: block;
      font-size: 28rpx;
      font-family: 'PingFangSC-Semibold', PingFangSC;
      font-weight: 600;
      color: rgba(34, 34, 34, 1);
      line-height: 40rpx;
      height: 80rpx;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .mark {
      display: block;
      font-size: 22rpx;
      font-family: 'PingFangSC-Regular', PingFangSC;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 40rpx;
      margin-top: 20rpx;
    }
  }
}
.footer{
    img{
        display: block;
        width: 690rpx;
        height:300rpx;
        margin: -30rpx auto 0;
    }
}

</style>
